Skip to content

Landmark Name Uniqueness ​

Naming a region is only half the job. If two navigations on the same page are both called "Main navigation", the screen reader announces them identically and the user is back where they started — unable to tell which is which.

This check looks for regions of the same kind that share a name.


What the tool checks ​

The tool groups the page's regions by kind, reads the name of each one, and looks for repeats within a group.

The name is taken from the first of these that is present:

  1. aria-label
  2. aria-labelledby — the text of the element it points to
  3. title

Before comparing, names are normalised: upper and lower case are ignored, and extra spaces at the start and end are trimmed. So "Main navigation", "main navigation" and " MAIN NAVIGATION " all count as the same name.


Why it matters ​

A screen reader user pulling up the list of regions sees "navigation, navigation" and has to guess. The names exist, so nothing looks broken to a sighted developer, but the user gains nothing from them.


When it reports an issue ​

Two or more visible regions of the same kind share the same name, once case and surrounding spaces are ignored.

html
<nav aria-label="Main navigation">...</nav>
<nav aria-label="main navigation">...</nav>

One issue is generated per affected region, and the report names the kind of region, the repeated name, and how many instances share it.


Region kinds covered ​

ElementRegion kind
<header> (page level)banner
<nav>navigation
<main>main
<aside>complementary
<footer> (page level)contentinfo
<section> (with a name)region
<form> (with a name)form
Any element with a landmark role (role="search", etc.)the corresponding kind

When it stays quiet ​

  • Every region of a kind has a different name.
  • There is only one region of that kind — nothing to collide with.
  • Regions that are hidden (display: none, visibility: hidden, aria-hidden="true").
  • <header> and <footer> nested inside other containers — these are not page-level regions.
  • <section> and <form> without a name — these are not exposed as regions at all.
  • Regions with no name whatsoever. Those are a different problem, covered by Landmark Accessible Label.

What the report says ​

Title: Page has multiple [region type] landmarks without unique names

Description: The page has multiple [region type] landmarks announced just as '[repeated name]'.

Actual result: The page has multiple [region type] landmarks with the same accessible name.

Expected result: Each landmark of the same type should have a unique and descriptive accessible name.

WCAG checkpoint: 1.3.1 - Info and Relationships


How to fix it ​

Give each region a name that says what it is for, not just what it is:

html
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Footer navigation">...</nav>

How to verify it by hand ​

  1. Open the page and turn on a screen reader.
  2. Navigate by regions — the D key in NVDA.
  3. Listen for two regions of the same kind announced with the same words.

WCAG reference ​

Success Criterion 1.3.1 Info and Relationships (Level A)